<template>
  <div class="header">
    <router-link to="/">
      <div class="header-left">
        <div class="iconfont back-icon">&#xe665;</div>
      </div>
    </router-link>
    <div>
      <p class="city citys-l" @click="StyleChange" :class="{choose:isActived}">国内城市</p>
      <p class="city citys-r" @click="StyleChange" :class="{choose:!isActived}">国外城市</p>
    </div>
  </div>
</template>

<script>
import {ref} from "vue";

export default {
  name: 'Header',
  setup() {
    let isActived = ref(true)

    function StyleChange() {
      isActived.value = !isActived.value
    }

    return {isActived, StyleChange}
  }
}
</script>

<style scoped lang="stylus">
@import "~styles/vaibles.styl"
.header
  overflow hidden
  position relative
  height $headerHeight
  line-height $headerHeight
  background $bgColor
  text-align center
  color #ffffff

  .header-left
    position absolute
    top 0
    left 0
    width: 1rem
    float: left

    .back-icon
      text-align center
      font-size .7rem
      color #ffffff

  .city
    height .8rem
    width 30%
    line-height .7rem
    padding-top .15rem
    margin-top .1rem
    margin-bottom .1rem
    background-color white
    font-size .35rem
    color $bgColor
    display inline-block

  .citys-l
    padding-left .2rem
    margin-left .2rem
    margin-right -.03rem
    border-radius .2rem 0 0 .2rem

  .citys-r
    padding-right .2rem
    margin-right .2rem
    margin-left -.03rem
    border-radius 0 .2rem .2rem 0

  .choose
    background-color cornflowerblue
    color #ffffff
</style>
